import Api from '@/services/api.js';
import {
  mapping
} from '@/mixin/mixins/mapping.js';
import {
  debounce
} from '@/utils/utils';
// 各页面以组件形式 以组件活跃标识标记
const mappingEnum = {
  entryTime: 'ENTRYTIME',
  department: 'DEPARTMENT',
  post: 'POST',
  name: 'NAME',
  gender: 'GENDER',
  age: 'AGE',
  jobTag: 'JOBTAG'
}
export default {
  mixins: [mapping],
  components: {},
  data() {
    return {
      currIndex: 0, // 当前选中的角标
      items: [{
        title: '入职时间',
        type: 'select',
        value: '',
        itemMark: mappingEnum.entryTime,
        placeholder: '选择时间'
      }, {
        title: '部门 | 岗位',
        type: 'select',
        value: '',
        itemMark: mappingEnum.department,
        placeholder: '选择部门'
      },
      //  {
      //   title: '岗位',
      //   type: 'select',
      //   value: '',
      //   itemMark: mappingEnum.post,
      //   placeholder: '选择岗位'
      // },  
      {
        title: '管理层级',
        type: 'select',
        value: '基层',
        itemMark: mappingEnum.jobTag,
        placeholder: '选择管理层级'
      }, {
        title: '姓名',
        type: 'input',
        value: '',
        itemMark: mappingEnum.name,
        placeholder: '填写姓名'
      }, {
        title: '性别',
        type: 'select',
        value: '',
        itemMark: mappingEnum.gender,
        placeholder: '选择性别'
      }, {
        title: '年龄',
        type: 'select',
        value: '',
        itemMark: mappingEnum.age,
        placeholder: '选择年龄'
      }
      ],
      departments: [], // 部门列表
      jobTags: [], // 管理层级
    }
  },
  computed: {
    // 是否能进行下一步
    canBeNext() {
      return this.items.every(i => i.value.toString().trim())
    },
    // 答题人信息
    answererInfo() {
      return this.$store.state.answererInfo;
    }
  },
  created() {
    // 如果是新员工 不需要选入职时间
    if (this.answererInfo.newOrOld == 0) {
      this.items.shift()
    }
    // 获取部门列表
    this.getEnterpriseDepartments();
  },
  mounted() {
    this.updateStore({ jobTag: 0 });
    this.getJobTags();
  },
  methods: {
    // 获取管理层级
    async getJobTags() {
      const ret = await Promise.all([
        await this.$request({
          url: Api.getTypesByPid,
          data: { pid: '1730121347229MnHB' }
        }),
        await this.$request({
          url: Api.getTypesByPid,
          data: { pid: '1730121314664J3BI' }
        })
      ])
      if (ret.length == 2) {
        this.jobTags.push({ key: 0, val: '基层', children: [{ key: 0, val: '基层' }] });
        // 中层
        ret[0].result.forEach(i => {
          i.key = i.id;
          i.val = i.name;
        })
        // 高层
        ret[1].result.forEach(i => {
          i.key = i.id;
          i.val = i.name;
        })
        this.jobTags.push({ key: 1, val: '中层', children: ret[0].result });
        this.jobTags.push({ key: 2, val: '高层', children: ret[1].result });
      }
    },
    // 根据企业id获取企业部门
    async getEnterpriseDepartments(arg = {}) {
      const params = {
        ...arg, 
        enterpriseId: this.answererInfo.enterpriseId
      }
      this.departments = await this.$Serv.getEnterpriseDepartments(params);
    },
    // 输入框获取焦点时 赋值当前操作的角标
    onFocus(e) {
      const {
        index
      } = e.currentTarget.dataset;
      this.currIndex = index;
    },
    // 输入框事件 做一次防抖
    onInput: debounce(function (e) {
      const {
        value
      } = e.detail;
      this.items[this.currIndex].value = value;
      this.updateStore({
        userName: value
      })
    }, 200),
    handleItem(e) {
      const {
        item,
        index
      } = e.currentTarget.dataset;
      this.currIndex = index;
      switch (item.itemMark) {
        case mappingEnum.entryTime:
          this.$refs.datePickerViewPop.togglePopup(true);
          break
        case mappingEnum.department:
          const params = {
            value: item.value ? item.value.split(' | ') : [],
            arr: this.departments
          }
          this.$refs.commonDoublePickerPop.togglePopup(true, params);
          break;
        case mappingEnum.gender:
          this.showPickerPopup({
            value: item.value,
            arr: this.genderArr
          })
          break;
        case mappingEnum.age:
          this.showPickerPopup({
            value: item.value,
            arr: this.ages
          })
          break;
        case mappingEnum.jobTag:
          const args = {
            value: item.value ? item.value.split(' | ') : [],
            arr: this.jobTags
          }
          this.$refs.commonDoublePickerPop.togglePopup(true, args);
          break;
      }
    },
    // 显示选择弹窗
    showPickerPopup({ value, arr }) {
      this.$refs.commonPickerPop.togglePopup(true, { value, arr });
    },
    // 公共弹窗选择事件
    handlePickerPopup({ key, val }) {
      const item = this.items[this.currIndex];
      switch (item.itemMark) {
        case mappingEnum.gender:
          this.updateStore({
            userSex: key
          })
          break;
        case mappingEnum.age:
          this.updateStore({
            userAge: key
          })
          break;
      }
      this.items[this.currIndex].value = val;
    },
    // 两层弹窗选择器
    handleDoublePickerPopup(obj) {
      const item =  this.items[this.currIndex];
      item.value = `${obj.name} | ${obj.childName}`;
      switch(item.itemMark) {
        case mappingEnum.department:
          this.updateStore({
            departmentId: obj.id,
            jobId: obj.childId
          });
          break;
        case mappingEnum.jobTag:
          this.updateStore({
            jobTag: obj.id,
            adminJobId: obj.childId
          });
          break;
      }
    },
    updateStore(obj) {
      this.$store.commit('setStore', {
        answererInfo: {
          ...this.answererInfo,
          ...obj
        }
      });
    },
    // 日期选择确定事件
    datePickerConfirm(e) {
      this.items[this.currIndex].value = e;
    },
    handleTap() {
      const obj = this.items.find(i => !i.value.toString().trim());
      if (obj) {
        return uni.showToast({
          title: `请${obj.placeholder}`,
          icon: 'none'
        })
      }
      this.$parent.active = this.$parent.activeEnum.topics;
    }
  }
}